<template>
  <div class="box">
    <div class="querybox">
      <!-- <el-button
        type="primary"
        @click="add"
      >新增</el-button> -->
      <el-radio-group
        v-model="filters.platform"
        @change="changePlatForm"
      >
        <el-radio-button label="">小程序用户</el-radio-button>
        <el-radio-button label="5">公众号用户</el-radio-button>
      </el-radio-group>
      <div>
        <el-input
          v-model="filters.searchBy"
          placeholder="请输入用户名或手机号"
          style="width: 200px; right: 10px;"
          @keyup.enter.native="usersList(1)"
        />
        <el-button
          type="primary"
          @click="usersList(1)"
        >查询</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column v-if="filters.platform" key="ghfr" label="头像">
        <template slot-scope="scope">
          <img
            :src="scope.row.headImgUrl"
            alt=""
            width="80px"
          >
        </template>
      </el-table-column>
      <el-table-column v-if="filters.platform" key="45df" label="昵称">
        <template slot-scope="scope">
          <div>{{ scope.row.nickName? scope.row.nickName : '无' }}</div>
        </template>
      </el-table-column>
      <el-table-column v-else key="45dffd" label="姓名">
        <template slot-scope="scope">
          <div>{{ scope.row.name ? scope.row.name : '无' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话"
      />
      <el-table-column
        v-if="!filters.platform"
        key="2sdffs"
        prop="province"
        label="地址"
      />
      <el-table-column
        v-if="!filters.platform"
        key="1fsad"
        prop="contact_number"
        label="机构联系电话"
      />
      <el-table-column key="faslk" label="创建时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.created) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!filters.platform"
        key="2sdf"
        prop="reportCount"
        label="报告数量"
      />
      <!-- <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="启用"
            inactive-text="禁用"
            @change="statusChange(scope.row)"
          />
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewUser(scope.row.id, scope.index)"
          >查看</el-button>
          <!-- <el-button type="text" size="small" @click="updUser(scope.row, scope.index)">修改</el-button> -->
          <!-- <el-button
            type="text"
            size="small"
            @click="delUser(scope.row, scope.index)"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-pagination
        :total="total"
        :current-page="filters.pageNum"
        :page-size="filters.pageSize"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-row>

    <el-dialog
      :title="editType === 'add' ? '新增' : '查看'"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
    >
      <el-card
        class="box-card"
        shadow="hover"
      >
        <div
          slot="header"
          class="clearfix"
          style="position: relative;"
        >
          <span>用户信息</span>
          <el-button
            type="primary"
            style="position: absolute; right: 0; top: 50%; transform: translate(0, -50%)"
            @click="closeDialogForm('form', 'user')"
          >保存</el-button>
        </div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          :inline="true"
        >
          <el-form-item
            label="姓名"
            prop="realName"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.realName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="昵称"
            prop="nickName"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.nickName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="电话"
            prop="mobile"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.mobile"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="头像"
            prop="headImgUrl"
            :label-width="formLabelWidth"
          >
            <Upload
              v-model="form.headImgUrl"
              style="width: 185px;"
              :img-url="form.headImgUrl"
              @on-success="headImgUrlOnSuccess"
            />
          </el-form-item>
          <el-form-item
            label="来源appId"
            prop="sourceAppId"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.sourceAppId"
              autocomplete="off"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="平台"
            prop="platform"
            :label-width="formLabelWidth"
          >
            <el-input
              :value="form.platform === 4 ? '小程序' : '服务号'"
              autocomplete="off"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="性别"
            prop="sex"
            :label-width="formLabelWidth"
          >
            <el-radio-group v-model="form.sex" style="width: 185px;">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="!filters.platform"
            label="允许导入"
            prop="admin"
            :label-width="formLabelWidth"
          >
            <!-- <el-input v-model="form.admin" autocomplete="off" /> -->
            <el-radio-group v-model="form.admin" style="width: 185px;">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card
        v-if="form.platform === 4"
        class="box-card"
        shadow="hover"
      >
        <div
          slot="header"
          class="clearfix"
          style="position: relative;"
        >
          <span>机构信息</span>
          <el-button
            type="primary"
            style="position: absolute; right: 0; top: 50%; transform: translate(0, -50%)"
            @click="closeDialogForm('formOrg', 'org')"
          >保存</el-button>
        </div>
        <el-form
          ref="formOrg"
          :model="formOrg"
          :rules="rulesOrg"
          :inline="true"
        >
          <el-form-item
            label="机构名称"
            prop="name"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.name"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="机构代码"
            prop="code"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.code"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="是否是测试机构"
            prop="test"
            :label-width="formLabelWidth"
          >
            <el-input
              :value="formOrg.test ? '是' : '否'"
              autocomplete="off"
              readonly
            />
            <!-- <span :label-width="formLabelWidth">{{formOrg.test ? '是' : '否'}}</span> -->
          </el-form-item>
          <el-form-item
            label="机构联系电话"
            prop="contactNumber"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.contactNumber"
              autocomplete="off"
            />
          </el-form-item>
          <!-- <el-form-item label="机构地址" prop="pcaCodeDesc" :label-width="formLabelWidth">
            <el-input v-model="formOrg.pcaCodeDesc" autocomplete="off" />
          </el-form-item> -->
          <el-form-item
            label="机构地址"
            prop="pcaCodeDesc"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.pcaCodeDesc"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="机构地址码"
            prop="pcaCode"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.pcaCode"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="机构街道地址"
            prop="address"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.address"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="总评时间"
            prop="totalDuration"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.totalDuration"
              autocomplete="off"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="可报告数量"
            prop="restCount"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.restCount"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="子账号数量"
            prop="staffCount"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.staffCount"
              autocomplete="off"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="子账号数量配额"
            prop="staffQuota"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.staffQuota"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="logo"
            prop="logo"
            :label-width="formLabelWidth"
          >
            <Upload
              v-model="formOrg.logo"
              style="width: 185px;"
              :img-url="formOrg.logo"
              @on-success="onSuccess"
            />
          </el-form-item>
          <el-form-item
            label="到期时间"
            prop="expireTime"
            :label-width="formLabelWidth"
          >
            <el-date-picker
              v-model="formOrg.expireTime"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item
            label="商业机构"
            prop="bizOrg"
            :label-width="formLabelWidth"
          >
            <el-switch
              v-model="formOrg.bizOrg"
              :disabled="formOrg.bizOrg"
              @change="bizOrgChange(formOrg.id)"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="formOrg.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" prop="mobile" :label-width="formLabelWidth">
          <el-input v-model="formOrg.mobile" autocomplete="off" />
        </el-form-item>
      </el-form> -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('formOrg')">取 消</el-button>
        <!-- <el-button
          type="primary"
          @click="closeDialogForm('form')"
        >确 定</el-button> -->
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { usersList, userinfo, usersEdit } from '@/api/user'
import { bizorg_trans, orgsedit } from '@/api/org'
import { timeTranslateHMS } from '@/utils/formatdate'
// import { makeFormData } from '@/utils/index'
import Upload from '@/components/Upload'
export default {
  name: 'Documentation',
  components: {
    Upload
  },
  data() {
    return {
      timeTranslateHMS,
      filters: {
        mobile: '',
        username: '',
        platform: '',
        searchBy: '',
        pageNum: 1,
        pageSize: 10
      },
      form: {},
      admin: '0',
      formOrg: {},
      rulesOrg: {
        'name': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'contactNumber': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'pcaCodeDesc': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'address': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'logo': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'expireTime': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'code': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'test': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'pcaCode': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'totalDuration': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'restCount': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'staffCount': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'staffQuota': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'bizOrg': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ]
      },
      total: 0,
      rules: {
        admin: [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'mobile': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'sex': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'headImgUrl': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'realName': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'nickName': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'sourceAppId': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        'platform': [
          { required: false, message: '不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      query: '',
      editType: null
    }
  },
  mounted() {
    this.usersList()
    if (this.$route.params.id) {
      this.viewUser(this.$route.params.id)
    }
  },
  methods: {
    changePlatForm(val) {
      this.filters.pageNum = 1
      this.usersList()
    },
    bizOrgChange(orgId) {
      bizorg_trans({ orgId }).then((res) => {
      })
    },
    // dialog关闭事件
    beforeClose() {
      this.resetForm('form')
      this.resetForm('formOrg')
      this.usersList()
    },
    // logo上传成功监听
    onSuccess(res) {
      this.formOrg.logo = res
    },
    headImgUrlOnSuccess(res) {
      this.form.headImgUrl = res
    },
    // 新增操作
    add() {
      this.editType = 'add'
      this.dialogFormVisible = true
    },
    // 分页切换监听
    handleSizeChange(pageNum) {
      this.filters.pageNum = pageNum
      this.usersList()
    },
    // 用户列表
    usersList(num) {
      // const pageNum = this.filters.pageNum - 1
      if (num === 1) this.filters.pageNum = 1 // 查询时，分页器数字重置为1
      const pageNum = (num || this.filters.pageNum) - 1
      usersList({ ...this.filters, pageNum }, (this.filters.platform ? 'staff_list' : 'list')).then(res => {
        const result = res.data
        this.tableData = result.content
        this.total = result.totalElements
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除用户
    delUser(row, index) {
      this.editType = 'delete'
      this.tableData.splice(row, 1)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 修改用户
    updUser(row, index) {
      this.editType = 'update'
      this.dialogFormVisible = true
    },
    // 查看用户
    viewUser(id) {
      this.editType = 'view'
      this.dialogFormVisible = true
      this.userinfo(id)
    },
    // 用户详情
    userinfo(id) {
      userinfo({ userId: id }).then(res => {
        // res.data.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        // this.form = Object.assign(this.form, res.data)
        this.form = res.data.staff
        this.formOrg = res.data.org
        // let result = res.data;
        // this.tableData = result.users;
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.usersEdit(formName, type)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogFormVisible = false
      if (!this.$refs[formName]) return
      this.$refs[formName].resetFields()
    },
    // 新增用户
    usersEdit(formName, type) {
      // const { staff, org, admin } = this.form
      const staff = this.form
      const org = this.formOrg
      // var extInfo = new FormData();
      // extInfo.append('city',city);
      // let form_Data = new FormData();
      // let result = makeFormData({ extInfo: staff, org: org, admin })
      // { extInfo: staff, org: org, admin }
      // admin = admin
      if (type === 'user') {
        // staff.admin = this.admin
        usersEdit(staff).then((res) => {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          // this.resetForm(formName)
          // this.usersList()
          // this.dialogFormVisible = false
        })
      } else {
        const obj = { ...org }
        obj.expireTime = timeTranslateHMS(obj.expireTime, null, '/')
        orgsedit(obj).then((res) => {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          // this.resetForm(formName)
          // this.usersList()
          // this.dialogFormVisible = false
        })
      }
    },
    statusChange(row) {
      // {id: row.id, status: row.status}
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  margin-top: 40px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
}
.box-card {
  margin-bottom: 15px;
}
</style>
